<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none !important;
        }
        .select-box{
            width: 100%;
            height: 100px;
        }
        .input-1{
            width: 220px;
        }
        .img-c{
            position: relative;
            border:2px solid rgb(0, 0, 0);
            margin: 10px auto;
        }
        .bj{
            width: 100%;
            overflow: hidden;
        }
        .img2,.img3{
            position: absolute;
            /* background: red; */
            /* overflow: hidden; */
        }
        .i-c1{
            position: absolute;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        .i-c2{
            position: absolute;
            width: 100%;;
            height: 100%;
        }
        .img2{
            z-index: 1000;
        }
        .img3{
            width: 100%;;
            height: 100%;
            border: 1px solid green;
            z-index: 10000;

        }
        .img2-2{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100%;
        }
        .img2-1{
            position: absolute;
            top: 0;
            left:0;
            width: 100%;
            z-index: 0;
        }

    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="select-box">
            <div class="input-1">
                <el-input v-model="input" placeholder="请输入模拟屏幕大小"></el-input>
            </div>
            <template>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
              <button v-on:click="wz">获取图片参数</button>
        </div>
        <div class="img-c" v-bind:style="{width: input + 'px' }" id="tests">
            <img class="bj" src="img/01.jpg" alt="">
            <div class="img2" v-bind:style="{width:sj_w +'px',height:sj_h + 'px',top:sj_y+ 'px',left:sj_x+ 'px'}">
                
                <div class="i-c1">
                    <img ref="imgelement" id="testss" class="img2-1" alt="" v-bind:src="value" alt="" @load="loadImage">
                    <img class="img2-2" src="img/03.png">
                </div>
                <div class="i-c2">
                    <div id="test" class="img3">
                
                    </div>
                </div>
                
            </div>
            <!-- <img ref="imgelement" class="img2-1" alt="" v-bind:src="value" alt="" @load="loadImage" > -->
            
        </div>
    </div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    input: '320',
    sj_w:0,
    sj_h:0,
    sj_x:0,
    sj_y:0,
    bj_w:0,
    bj_h:0,
    bj_x:0,
    bj_y:0,
    naturalH:0,
    naturalW:0,
    naturalXS:0,//上传像素系数
    mbXS:1.08,//后台模板像素系数
    bl:0,//后台背景像素系数
    pyx:0,
    pyy:0,
    pyw:0,
    pyh:0,
    options: [{
                value: 'img/03.png',
                label: '素材1'
                }, {
                value: 'img/04.png',
                label: '素材2'
                }, {
                value: 'img/05.png',
                label: '素材3'
                }, {
                value: 'img/06.jpg',
                label: '素材4'
                }],
                value: 'img/02.jpg'
  },
  methods: {
      wz:function(){
         // var t = "素材偏移量：" +"X:"+vm.pyx+"    "+"Y:"+vm.pyy;
         // alert(dd)
      },
    boywidth:function(){//动态改变窗口
        let _this = this;
        //后台图片比例系数
        x = 170/566;
        y= 385/831;
        w = 190/563;
        h = 175/831;
        _this.bl = 566/831;//宽高比
        console.log("后台系数"+_this.bl);
        _this.sj_w = _this.input*w;
        _this.sj_h = _this.input/_this.bl*h;
        _this.sj_x = _this.input*x;
        _this.sj_y = _this.input/_this.bl*y;
    },
    loadImage(e){//vue获取原始图片像素
        let _this = this
        _this.naturalH = vm.$refs.imgelement.naturalHeight;
        _this.naturalW = vm.$refs.imgelement.naturalWidth;
        _this.naturalXS = _this.naturalW/_this.naturalH;
        if(_this.mbXS-_this.naturalXS >0.4){
            alert("图片尺寸不规范");
        }
        //显示缩放比例
        sf = _this.sj_w/_this.naturalW;
        console.log(sf+"缩放比例");
    },
  },
  watch:{
    input:function(val) {
        let _this = this;
        _this.boywidth()
    }
  },
  mounted: function () {
    let _this = this;
        _this.boywidth()
    }
  
});
//
var touchScale = function() {
	     var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWidth, imgHeight,
		 one = false, 
	     $touch = $(".img3"),  //选择放大缩小的元素
	     originalWidth = $touch.width(),
		 originalHeight = $touch.height(),
	     baseScale = parseFloat(originalWidth/originalHeight),
	     imgData = [],
	     bgTop = parseInt($(".img3").css('top'));
	     function siteData(name) {
	          imgLeft = parseInt(name.css('left'));
	          imgTop = parseInt(name.css('top'));
	          imgWidth = name.width();
	          imgHeight = name.height();
	      }
	      $(document).on('touchstart touchmove touchend', $(".img3"), function(event){
             var $me = $(".img3");
             var $mes = $(".img2-1");
             touch1 = event.originalEvent.targetTouches[0],  // 第一根手指touch事件
             touch2 = event.originalEvent.targetTouches[1],  // 第二根手指touch事件
             fingers = event.originalEvent.touches.length;   // 屏幕上手指数量
 
             //手指放到屏幕上的时候，还没有进行其他操作
             if (event.type == 'touchstart') {
                 if (fingers == 2) {
                     // 缩放图片的时候X坐标起始值
                     startX = Math.abs(touch1.pageX - touch2.pageX);
                     one = false;
                 }else if (fingers == 1) {
                     x1 = touch1.pageX;
                     y1 = touch1.pageY;
                     one = true;
                  }
              //siteData($me);
              }
              //手指在屏幕上滑动
              else if (event.type == 'touchmove') {
                   if (fingers == 2) {
                   // 缩放图片的时候X坐标滑动变化值
                   endX = Math.abs(touch1.pageX - touch2.pageX);
                   scale = endX - startX;
                   $me.css({
                        'width' : originalWidth + scale,
                        'height' :originalWidth + scale
                   });  
                   $mes.css({
                        'width' : originalWidth + scale,
                        'height' :originalWidth + scale
                   });  

   				}else if (fingers == 1) {
                    x2 = touch1.pageX;
                    y2 = touch1.pageY;
                    if (one) {
                         $me.css({
                          'left' : imgLeft + (x2 - x1),
                           'top' : imgTop + (y2 - y1)
                          });
                          $mes.css({
                          'left' : imgLeft + (x2 - x1),
                           'top' : imgTop + (y2 - y1)
                          });
                      }
                }
          }
           //手指移开屏幕
          else if (event.type == 'touchend') {
          // 手指移开后保存图片的宽
                originalWidth = $touch.width(),
                siteData($me);
                imgData = [imgLeft, imgTop-bgTop, imgWidth, imgHeight];
                alert(imgData)
            }
        });
                var getData = function(){
                    return imgData;
                };
                console.log(imgData)
                return {
                    imgData : getData
                }
      };
   var dd=touchScale()
//
</script>